<template>
  <el-card shadow="never">
    <div id="printCard">
      <div slot="header" class="clearfix">
        <span class="table-title">{{ $t('baseInfo') }}</span>
      </div>
      <div class="card-base-info">
        <ul>
          <li v-for="(key, index) in baseInfoList" :key="index">
            <span>{{ key.name }}:</span>
            <img v-if="key.id === 'prelendNo'" class="lend-code" >
            <span v-else class="info-value">{{ formInfo[key.id] }}</span>
          </li>
        </ul>
      </div>
      <div class="card-preLend-info">
        <span class="table-title card-preLend-title"> {{ $t('loanInformation') }}</span>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableList"
          :table-columns="tableColumns"
        />
      </div>
    </div>
    <el-row style="margin: 20px 0px">
      <el-col>
        <div class="footer-btns">
          <el-button
            type="primary"

            icon="el-icon-receiving"
            @click="doSave">{{ $t('save') }}</el-button>
          <el-button
            type="primary"

            icon="el-icon-printer"
            @click="doPrint">{{ $t('print') }}</el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import toolingPreLendApi from '@/api/Tooling/toolingPreLend'
export default {
  name: 'BaseTableInfo',
  components: {},
  mixins: [mySetting, networkTips],
  props: {
    formInfo: {
      type: Object,
      default: () => ({})
    },
    tableList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      baseInfoList: [
        { id: 'workOrder', name: this.$t('workOrder') },
        { id: 'eqpId', name: this.$t('eqpName') },
        { id: 'productName', name: this.$t('productName') },
        { id: 'customerCode', name: this.$t('customer') },
        { id: 'processFlowName', name: this.$t('processFlow') },
        { id: 'tips', name: this.$t('tip') },
        { id: 'prelendNo', name: this.$t('prelendNo') }
      ],
      tableLoading: false,
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'bringMode', label: this.$t('Bringoutmode'), templete: (_scope) => {
          return (
            <span>{_scope.row.bringMode === 1 ? '带出备件编号' : '带出数量'}</span>
          )
        } },
        { prop: 'toolingType', label: this.$t('toolingType') },
        { prop: 'toolingModel', label: this.$t('toolingModel') },
        { prop: 'stock', label: this.$t('stock') },
        { prop: 'toolingBarcode', label: this.$t('toolingBarcode') },
        { prop: 'cnt', label: this.$t('nums') }
      ]
    }
  },
  computed: {},
  watch: {
    formInfo: {
      handler() {
        this.$nextTick(() => {
          this.getBarCode()
          this.options.loading = false
        })
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    doSave() {
      toolingPreLendApi
        .saveForm(this.$clearNull({ ...this.formInfo, prelendsList: this.tableList }))
        .then((res) => {
          this.netTips(res, this.handleUpdate)
        })
    },
    doPrint() {
      var str = ''
      var styles = document.querySelectorAll('style,link')
      for (var i = 0; i < styles.length; i++) {
        str += styles[i].outerHTML
      }
      str += '<style>' + (this.options.noPrint ? this.options.noPrint : '.no-print') + '{display:none;}</style>'
      // 去除height：100%样式，解决分页下，样式混乱问题
      str += '<style>html,body,div{height: auto!important;}</style>'
      const iframe = document.createElement('iframe')
      iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;')
      const newElement = document.getElementById('printCard').innerHTML + str
      const f = document.body.appendChild(iframe)
      // document.body.appendChild(iframe)
      // iframe.contentDocument.write(newElement)
      // iframe.contentDocument.close()
      // iframe.contentWindow.print()
      // document.body.removeChild(iframe)
      const w = f.contentWindow || f.contentDocument
      const doc = f.contentWindow.document
      doc.write(newElement)
      doc.close()
      w.print()
    },
    // 生成条形码
    getBarCode() {
      var JsBarcode = require('jsbarcode')
      const code = this.formInfo.prelendNo
      JsBarcode('.lend-code', code, {
        textAlign: 'center',
        textPosition: 'bottom',
        fontSize: 14,
        textMargin: 5,
        text: code,
        height: 30
      })
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    // 清空表单
    emptyForm() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped lang="scss">
.clearfix,
.card-preLend-info {
  .table-title {
    font-size: 16px;
    font-weight: bold;
    color: red;
  }
}
.clearfix{
  padding: 20px 0 10px 10px;
}
.card-base-info {
  box-sizing: border-box;
  padding: 0 20px;
  ul {
    padding-left: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 50%;
      padding: 0 0 20px 0;
      span {
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
      }
      span:nth-child(2) {
        padding-left: 20px;
        font-weight: n;
      }
    }
    li:nth-child(n + 5) {
      width: 100%;
    }
    li:last-child {
      display: flex;
      align-items: flex-start;
      padding-bottom: 0;
      span {
        padding-top: 14px;
      }
    }
  }
}
.card-preLend-info {
  box-sizing: border-box;
  padding: 0 20px;
  .card-preLend-title {
    display: block;
    padding: 0 0 18px 0;
  }
}
.footer-btns{
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
}
@page {
  size: auto A4 landscape;
  margin: 3mm;
}
</style>
